<template>
  <div id="main">

    <el-container>
      <el-header>后台管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <!-- router 代表开启路由功能 以你的index作为路由的路径-->
          <el-menu
              class="el-menu-vertical-demo"
              :router="true"
          >
            <!--          <el-submenu  v-for="subment in menus" :index="subment.mid">-->
            <!--            <template slot="title">-->
            <!--              <i class="subment.icon"></i>-->
            <!--              <span>{{subment.title}}</span>-->
            <!--            </template>-->
            <!--                <el-menu-item v-for="children in subment.children" :index="children.href">-->
            <!--                  <i class="children.icon" ></i>-->
            <!--                  <span slot="title">{{children.title}}</span>-->
            <!--                </el-menu-item>-->
            <!--          </el-submenu>-->
            <Menu :menuData="menus"></Menu>
          </el-menu>

        </el-aside>
        <el-container>
          <el-main>
            <!--路由渲染-->
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import Menu from '../components/Menu.vue'

export default {
  name: "main",
  components:{
    Menu,
  },
  data(){
    return{
      menus:[]
    }
  },
  created(){
    this.initMenu()
  },
  methods:{
    initMenu(){
      let that = this;
      this.$ajax.get("/Menu/leftmenu").then(resp=>{

          that.menus=resp.data.data;
          console.log(that.menus);

      })
    }
  },
}
</script>

<style scoped>

</style>